<style>
    .layui-table-cell {
        height: 42px;
        line-height: 42px;
    }

    .layui-table td img {
        width: 42px;
    }

    .xm-select-dl{
        width:460px !important;
    }
    
    .xm-select-dl{
        width:420px !important;
    }
    .xm-select-linkage .xm-select-linkage-group li {
        height:24px;
        line-height:24px
    }
    .xm-select-linkage .xm-select-linkage-group li span{
       line-height:24px
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-content-list2">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">关键字</label>
                    <div class="layui-input-inline" style="width:170px;">
                        <input type="text" name="key2" id="key2" placeholder="名称/编码/品牌/关键字" autocomplete="off"
                            class="layui-input">
                    </div>
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline">
                        <select name="cateID2" xm-select="cateID2" xm-select-radio="" xm-select-search=""
                                xm-select-skin="default">
                            <option value=""></option>
                        </select>
                    </div>
                    <label class="layui-form-label">供应商</label>
                    <div class="layui-input-inline">
                        <select name="supplier" xm-select="supplier" xm-select-radio="" xm-select-search xm-select-skin="default">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search2">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-delete2">
                        <i class="layui-icon layui-icon-delete layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;" id="btn">
                <button class="layui-btn layuiadmin-btn-list" data-type="confirm">确认选择</button>
            </div>
            <table id="LAY-app-content-list2" lay-filter="LAY-app-content-list2"></table>
        </div>
    </div>
</div>
<script>

    var cid = "";
    var param = "show=0";

    var formSelects, admin, form, $;
    layui.use(['form', 'admin', 'table', 'formSelects'], function () {
        $ = layui.$
            , admin = layui.admin
            , view = layui.view
            , table = layui.table
            , form = layui.form;
        formSelects = layui.formSelects;


        formSelects.config('cateID2', {
            keyName: 'title',            //自定义返回数据中name的key, 默认 name
            keyVal: 'id',            //自定义返回数据中value的key, 默认 value
            keyChildren: 'children',    //联动多选自定义children
        });

        admin.req({
            url: layui.setter.APIUrl + '/shop/goodsCategoryMgr/customerQueryChildren', //实际使用请改成服务端真实接口
            type: 'post',
            done: function (res) {
                layui.formSelects.data('cateID2', 'local', {
                    arr: res.Data,
                });
            }
        });

        formSelects.config('supplier', {
            keyName: 'title',            //自定义返回数据中name的key, 默认 name
            keyVal: 'id',            //自定义返回数据中value的key, 默认 value
            keyChildren: 'children',    //联动多选自定义children
        });

        admin.req({
            url: layui.setter.APIUrl + '/shop/supplierMgr/customerQueryChildren2', //实际使用请改成服务端真实接口
            type: 'post',
            done: function (res) {
                layui.formSelects.data('supplier', 'local', {
                    arr: res.Data,
                    linkage: true,
                    linkageWidth: 100
                });
            }
        });
        formSelects.on('supplier', function (id, vals, val, isAdd, isDisabled) {
            if (isAdd == true) {
                if (val.value.indexOf("/") <= 0 || ((val.value.split('/')).length - 1) < 2) {
                    isAdd = false;
                    return false;
                }
            }
        });

        //收缩全部节点
        var isFirst = true;
        layui.formSelects.opened('cateID2', function (id) {
            if (isFirst) {
                isFirst = false;
                $('[fs_id="cateID2"]').find('.xm-cz i.icon-caidan').click();
            }
        });
        formSelects.on('cateID2', function (id, vals, val, isAdd, isDisabled) {
            if (isAdd == true) {
                cid = val.value;
            } else {
                cid = "";
            }
        });


        //文章管理
        table.render({
            elem: '#LAY-app-content-list2'
            , toolbar: true  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , defaultToolbar: ['filter']
            , method: "post"
            , url: layui.setter.APIUrl + '/shop/goodsMgr/listPain?param=' + param
            , headers: { //通过 request 头传递
                Authorization: "bearer " + layui.data('layuiAdmin').access_token
            }
            , parseData: function (res) { //res 即为原始返回的数据 
                varButtonRight = res.Data.ButtonRight;
                var ItemPids = "";
                for (var i = 0; i < res.Data.Items.length; i++) {
                    for (var c = 0; c < checkIDs.length; c++) {
                        if (res.Data.Items[i].PID == checkIDs[c]) {
                            res.Data.Items[i]["LAY_CHECKED"] = true;
                        }
                    }
                    ItemPids += res.Data.Items[i].PID + ",";
                }
                return {
                    "ResultCode": res.ResultCode, //解析接口状态
                    "ResultInfo": res.ResultInfo, //解析提示文本
                    "count": res.Data.TotalRecordCount, //解析数据长度
                    "Data": res.Data.Items //解析数据列表 
                };
            }
            , cols: [[
                { type: 'checkbox', fixed: 'left', field: 'PID' }, //sort: true  //hide: true //  width:100
                { field: 'Code', title: '商品编码', width: 100 },
                { field: 'GoodsCategoryID_SelSourceName', title: '所属分类', width: 150 },
                { field: 'Name', title: '商品名称', minWidth: 250 },
                { field: 'StoreID_SelSourceName', title: '店铺', minWidth: 250 },
                { field: 'SupplierID_SelSourceName', title: '供应商', minWidth: 250 },
                {
                    field: 'Path_Upload', title: '封面图', templet: function (d) {
                        var html = "<img src=" + layui.setter.ImgPath + d.Path_Upload + " alt='' />";
                        return html;
                    }, width: 100
                },
                //{ field: 'RMK', title: '说明', minWidth: 80 },     
                {
                    field: 'LowPrice', title: '价格', width: 120, templet: function (d) {
                        var html = "<div style='font-size:1.08em;color:red;font-weight:bold'>￥" + d.Price + "</div>";
                        return html;
                    }
                },

            ]]
            , page: true
            , limit: 10
            , limits: [10, 15, 20, 25, 30]
            , text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增 text: '对不起，加载出现异常！'
            }
        });


        table.on('checkbox(LAY-app-content-list2)', function (obj) {
            //console.log(obj.checked); //当前是否选中状态
            //console.log(obj.data); //选中行的相关数据
            //console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
            debugger
            if (obj.type == "one") {
                var id = obj.data.PID;
                var name = obj.data.Name;

                if (obj.checked == true) {
                    checkIDs.push(id);
                } else {
                    for (var i = 0; i < checkIDs.length; i++) {
                        if (checkIDs[i] == id) {
                            checkIDs.splice(i, 1);
                        }
                    }
                }
            } else {
                var checkStatus = table.checkStatus('LAY-app-content-list2');
                var checkData = checkStatus.data; //得到选中的数据
                if (obj.checked == false) {
                    checkData = table.cache["LAY-app-content-list2"];
                }
                $.each(checkData, function (index, eobj) {
                    if (obj.checked == true) {
                        var ishave = 0;
                        for (var i = 0; i < checkIDs.length; i++) {
                            if (checkIDs[i] == eobj.PID) {
                                ishave = 1;
                            }
                        }
                        if (ishave == 0) {
                            checkIDs.push(eobj.PID);
                        }
                    } else {
                        for (var i = 0; i < checkIDs.length; i++) {
                            if (checkIDs[i] == eobj.PID) {
                                checkIDs.splice(i, 1);
                            }
                        }
                    }
                });

            }
        });
        //监听工具条
        table.on('tool(LAY-app-content-list2)', function (obj) {
            var data = obj.data;
            if (obj.event === 'view') {
                admin.popup({
                    title: '查看信息'
                    , area: ['80%', '96%']
                    , id: 'LAY-popup-content-view'
                    , success: function (layero, index) {
                        view(this.id).render('/shop/shop_Goods/view', data).done(function () {
                            form.render(null, 'layuiadmin-app-form-list');
                        });
                    }
                });
            }
        });

        form.render(null, 'app-content-list2');

        //监听搜索
        form.on('submit(LAY-app-contlist-search2)', function (data) {
            var field = data.field;
            field.cateID = cid;
            field.key = $("#key2").val();
            //执行重载
            table.reload('LAY-app-content-list2', {
                where: field
            });
        });

        form.on('submit(LAY-app-contlist-delete2)', function (data) {
            $("#key2").val("");
            layui.formSelects.value('cateID2', []);
            layui.formSelects.value('supplier', []);
            form.render('select');
            var field = data.field;
            field.cateID = "";
            field.key = "";
            field.supplier = "";
            //执行重载
            table.reload('LAY-app-content-list2', {
                where: field
            });
        });

    });
</script>